<template>
  <div class="mod_box">
    <el-form
      :disabled="readonly"
      :model="formData"
      label-width="120px"
      :rules="formRules"
      ref="formData"
    >
      <h4 class="hbg mt0 jiben">
        基本信息
        <el-button type="primary" size="small" @click="save" class="headSaveBtn">保存</el-button>
      </h4>
      <el-row>
        <el-col :sm="8">
          <el-form-item label="单位名称" prop="companyName">
            <el-input v-model="formData.companyName" placeholder="请输入单位名称"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :sm="8">
          <el-form-item label="单位编码" prop="companyCode">
            <el-input v-model="formData.companyCode" placeholder="请输入单位编码"></el-input>
          </el-form-item>
        </el-col>-->
      </el-row>
      <el-row>
        <el-col :sm="8">
          <el-form-item label="隶属类别" prop="subLevId">
            <el-select
              :disabled="true"
              v-model="formData.subLevId"
              placeholder="请选择隶属类别"
              style="width: 100%;"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in lishuleibie"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :sm="8">
          <el-form-item label="隶属类型" prop="tagId">
            <el-select
              v-model="formData.tagId"
              placeholder="请选择隶属类型"
              style="width: 100%;"
              :disabled="true"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in taglist"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="8">
          <el-form-item label="上级单位" prop="parentId">
            <el-select
              :filterable="true"
              v-model="formData.parentName"
              placeholder="请选择上级单位"
              style="width: 100%;"
              :disabled="true"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in pcoms"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :sm="8">
          <el-form-item label="单位规格" prop="standardId">
            <el-select v-model="formData.standardId" placeholder="请选择单位规格" style="width: 100%;">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in gg"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="8">
          <el-form-item label="单位性质" prop="properId">
            <el-select v-model="formData.properId" placeholder="请选择单位性质" style="width: 100%;">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in xz"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :sm="8">
          <el-form-item label="联系地址" prop="address">
            <el-input v-model="formData.address" placeholder="请输入联系地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="8">
          <el-form-item label="紧急联系人" prop="linkMan">
            <el-input v-model="formData.linkMan" placeholder="请输入紧急联系人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="8">
          <el-form-item label="紧急联系电话" prop="mobile">
            <el-input v-model="formData.mobile" placeholder="请输入紧急联系电话"></el-input>
          </el-form-item>
        </el-col>
      </el-row>-->
      <!-- <el-row>
        <el-col :sm="24">
          <el-form-item label="备注信息" prop="reMark">
            <el-input v-model="formData.reMark" type="textarea" placeholder="请输入单位名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>-->
      <!-- <h4 class="hbg mt0 jiben">人员信息</h4> -->

      <el-row>
        <el-col :sm="6">
          <el-form-item label="单位编制人数" prop="rybznum">
            <el-input v-model="formData.rybznum" type="number" step="1" min="0"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="6">
          <el-form-item label="单位实有人数" prop="dxhgwnum">
            <el-input v-model="formData.dwsynum" type="number" step="1" min="0"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="6">
          <el-form-item label="离退休干部人数" prop="ltxgbrs">
            <el-input v-model="formData.ltxgbrs" type="number" step="1" min="0"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :sm="6">
          <el-form-item label="离退休干部人数 " prop="ltxgbrs">
            <el-input v-model="formData.ltxgbrs" type="number" step="1" min="0"></el-input>
          </el-form-item>
        </el-col>-->
      </el-row>
      <h4 class="hbg mt0 jiben">
        车辆绑定
        <el-button type="primary" size="small" @click="preservation" class="headSaveBtn">保存</el-button>
      </h4>

      <el-row>
        <el-col :span="24" class="form-conter">
          <el-form-item label="省部级人数">
            <el-input-number
              v-model="shenbu"
              controls-position="right"
              @change="handleShenbu"
              :min="0"
              :max="20"
            ></el-input-number>
          </el-form-item>
          <div v-show="shenbu > 0">
            <el-row>
              <div :span="12" class="bianzhi-top">
                <div class="bangdingTitle">
                  省部级人员及车辆绑定
                  <!-- <el-button
                    type="primary"
                    size="small"
                    @click="shenbuData"
                    class="headSaveBtn bangdingBtn"
                  >保存</el-button>-->
                </div>
                <div class="input-zong" v-for="(item,index) in iptList" :key="index">
                  <el-form :rules="rules3" :model="iptList[index]" class="demo-ruleForm">
                    <div class="form-bianzhi2">
                      <el-form-item label="姓名" prop="name" label-width="50px">
                        <el-input v-model="item.name"></el-input>
                      </el-form-item>

                      <el-form-item label="在职情况" prop="leixin" label-width="80px">
                        <el-select v-model="item.leixin" placeholder="请选择在职情况">
                          <el-option label="在职正省" value="在职正省"></el-option>
                          <el-option label="在职副省" value="在职副省"></el-option>
                          <el-option label="离休正省" value="离休正省"></el-option>
                          <el-option label="离休副省" value="离休副省"></el-option>
                          <el-option label="退休正省" value="退休正省"></el-option>
                          <el-option label="退休副省" value="退休副省"></el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item label="是否领取车补" prop="chebu" label-width="110px">
                        <el-select v-model="item.chebu" placeholder="请选择是否车补">
                          <el-option label="是" value="1"></el-option>
                          <el-option label="否" value="0"></el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item
                        label="车辆车牌"
                        prop="chepai"
                        v-show="item.chebu==0"
                        label-width="80px"
                      >
                        <el-input v-model="item.chepai"></el-input>
                      </el-form-item>

                      <el-form-item label-width="50px">
                        <el-button type="danger" size="small" @click="delData(iptList[index])">删除</el-button>
                      </el-form-item>
                    </div>
                  </el-form>
                </div>
                <!-- <el-row>
                  <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                      <el-button type="primary" @click="shenbuData">确认提交</el-button>
                    </div>
                  </el-col>
                </el-row>-->
              </div>
            </el-row>
          </div>
        </el-col>

        <el-col :span="24" class="form-conter">
          <el-form-item label="定向化岗位人数">
            <el-input-number
              v-model="dingxiang"
              controls-position="right"
              @change="handleDingxiang"
              :min="0"
              :max="20"
            ></el-input-number>
          </el-form-item>

          <div v-show="dingxiang > 0">
            <div span="12" class="bianzhi-top">
              <div class="bangdingTitle">
                定向化岗位人员及车辆绑定
                <!-- <el-button
                  type="primary"
                  size="small"
                  @click="dinghuaData"
                  class="headSaveBtn bangdingBtn"
                >保存</el-button>-->
              </div>
              <div class="input-zong" v-for="(item,index) in dinList" :key="index">
                <el-form
                  :rules="rules4"
                  :model="dinList[index]"
                  ref="dinList"
                  class="demo-ruleForm"
                >
                  <div class="form-bianzhi2">
                    <el-form-item label="姓名" prop="name" label-width="50px">
                      <el-input v-model="item.name"></el-input>
                    </el-form-item>

                    <el-form-item label="岗位" prop="gangwei" label-width="50px">
                      <el-input v-model="item.gangwei"></el-input>
                    </el-form-item>
                    <el-form-item label="是否领取车补" prop="chebu" label-width="110px">
                      <el-select v-model="item.chebu" placeholder="请选择是否车补">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item
                      label="车辆车牌"
                      prop="chepai"
                      v-show="item.chebu==0"
                      label-width="80px"
                    >
                      <el-input v-model="item.chepai"></el-input>
                    </el-form-item>

                    <el-form-item label-width="50px">
                      <el-button type="danger" size="small" @click="delData(dinList[index])">删除</el-button>
                    </el-form-item>
                  </div>
                </el-form>
              </div>
              <!-- <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple-dark">
                    <el-button type="primary" @click="dinghuaData">确认提交</el-button>
                  </div>
                </el-col>
              </el-row>-->
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <h4 class="hbg mt0 jiben">
      公务用车管理人员信息
      <!-- <el-button type="primary" size="small" @click="change3Linkman" class="headSaveBtn">保存</el-button> -->
    </h4>
    <el-row v-for="(linkman_, index) in linkman" :key="index">
      <el-form label-width="80px" :disabled="readonly">
        <el-col :sm="2">
          <el-form-item label="分管领导" v-if="index==0"></el-form-item>
          <el-form-item label="管理员" v-if="index==1"></el-form-item>
          <el-form-item label="联络员" v-if="index==2"></el-form-item>
        </el-col>
        <el-col :sm="4">
          <el-form-item label="姓名">
            <el-input v-model="linkman_.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="4">
          <el-form-item label="职务">
            <el-input v-model="linkman_.job" placeholder="请输入职务"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="4">
          <el-form-item label="手机号">
            <el-input v-model="linkman_.phone" type="number" placeholder="请输入手机号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="4">
          <el-form-item label="座机">
            <el-input v-model="linkman_.zuoji" placeholder="请输入座机"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="4" style="padding-left: 20px;" v-if="!readonly">
          <el-button type="primary" @click="changeLinkman(index)">保存</el-button>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
// .mod_box {
//   padding: 20px;
// }
</style>
<script>
import { axios } from "@/api/axios";
import { findld, addld, removeld } from "@/api/company";
import vueRoot from "../../../../main";
export default {
  data: function () {
    return {
      //表单数据
      formData: {},
      readonly: false, //只读模式 用于查看单位信息
      iptList: [], //省部级全部
      dinList: [], //定向化全部
      taglist: [],
      pcoms: [],
      gg: [],
      xz: [],
      typeId: [],
      shenbu: 0, //省部级人数
      dingxiang: 0, //定向化人数
      //联系人 每个单位3个
      linkman: [
        {
          name: "",
          job: "",
          phone: "",
          zuoji: "",
          "company.id": "",
          type: 1,
        },
        {
          name: "",
          job: "",
          phone: "",
          zuoji: "",
          "company.id": "",
          type: 2,
        },
        {
          name: "",
          job: "",
          phone: "",
          zuoji: "",
          "company.id": "",
          type: 3,
        },
      ],
      lishuleibie: [
        {
          id: 1,
          name: "省直部门及所属单位",
        },
        {
          id: 2,
          name: "市直部门及所属单位",
        },
        {
          id: 3,
          name: "区直部门及所属单位",
        },
        {
          id: 4,
          name: "乡镇级",
        },
      ],
      //表单验证
      formRules: {
        subLevId: [
          {
            required: true,
            message: "请选择隶属类别",
            trigger: "blur",
          },
        ],
        tagId: [
          {
            required: true,
            message: "请选择隶属类型",
            trigger: "blur",
          },
        ],
        /* 			parentId : [
									{
										required : true,
										message : "请选择上级单位",
										trigger : "blur"
									}
								], */
        standardId: [
          {
            required: true,

            message: "请选择单位规格",
            trigger: "blur",
          },
        ],
        properId: [
          {
            required: true,
            message: "请选择单位性质",
            trigger: "blur",
          },
        ],
        // address: [
        //   {
        //     required: true,
        //     message: "请输入联系地址",
        //     trigger: "blur"
        //   }
        // ],
        // linkMan: [
        //   {
        //     required: true,
        //     message: "请输入紧急联系人",
        //     trigger: "blur"
        //   }
        // ],
        // mobile: [
        //   {
        //     required: true,
        //     message: "请输入紧急联系电话",
        //     trigger: "blur"
        //   }
        // ],
        // reMark: [
        //   {
        //     required: true,
        //     message: "请输入备注信息",
        //     trigger: "blur"
        //   }
        // ],
        companyName: [
          {
            required: true,
            message: "请输入单位名称",
            trigger: "blur",
          },
        ],
        companyCode: [
          {
            required: true,
            message: "请输入单位编码",
            trigger: "blur",
          },
        ],
      }, //省部级表单验证
      rules3: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        leixin: [
          { required: true, message: "请选择省部类型", trigger: "change" },
        ],
        chepai: [
          { required: true, message: "请输入车辆车牌", trigger: "blur" },
        ],
        chebu: [
          { required: true, message: "请选择是否车补", trigger: "change" },
        ],
      }, //定向化表单验证
      rules4: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        gangwei: [{ required: true, message: "请输入岗位", trigger: "blur" }],
        chebu: [
          { required: true, message: "请选择是否车补", trigger: "change" },
        ],
        chepai: [
          { required: true, message: "请输入车辆车牌", trigger: "change" },
        ],
      },
      dingxianghua: [],
      shengbu: [],
    };
  },
  created() {
    //管理员不能修改编制
    if (this.$store.getters.userInfo.usertype == 1) {
      this.$alert(
        "该账户没有相关单位信息,管理员账号没有单位属性，请返回",
        "错误提示",
        {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$router.replace({ name: "dashboard" });
          },
        }
      );
    } else {
      this.fetchData();
    }
  },
  methods: {
    async delData(data) {
      if (data.id == undefined) {
        this.$message({
          message: "请先保存数据",
          type: "error",
        });
      } else {
        let params = {
          ids: data.id,
        };
        let r = await removeld(params);
        if (r.error == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.fetchData();
        } else {
          this.$message({
            message: "操作失败",
            type: "error",
          });
        }
      }
    },
    preservation() {
      if (this.shenbu >= 0) {
        this.shenbuData();
        console.log(this.iptList);
      }
      if (this.dingxiang >= 0) {
        this.dinghuaData();
        console.log(this.dinList);
      }
    },
    async shenbuData() {
      let filteredData = this.iptList
        .filter((e) => {
          if (e.chebu == 0) {
            return e.name && e.leixin && e.chebu && e.chepai;
          } else {
            return e.name && e.leixin && e.chebu;
          }
        })
        .map((e) => {
          return {
            username: e.name,
            gw: e.leixin,
            cb: e.chebu,
            carcode: e.chepai,
            usertype: 0,
            companyid: this.formData.id,
          };
        });
      if (this.shenbu > filteredData.length) {
        try {
          await this.$confirm(
            "含有填写不完整的人员信息,将被忽略, 是否提交?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          );
          console.log("ok...");
        } catch (error) {
          console.log("not ok...");
          return;
        }
      }
      try {
        let r = await addld({ json: JSON.stringify(filteredData) });
        if (r.error == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.iptList = [];
          this.dinList = [];
          this.shenbu = 0;
          this.dingxiang = 0;
          this.findld(0);
        } else {
          this.$message({
            message: "操作失败",
            type: "error",
          });
        }
      } catch (error) {
        console.log(error);
        this.$message({
          message: "操作失败",
          type: "error",
        });
      }
      console.log("submit...");
    },
    async dinghuaData() {
      let filteredData = this.dinList
        .filter((e) => {
          if (e.chebu == 0) {
            return e.name && e.gangwei && e.chebu && e.chepai;
          } else {
            return e.name && e.gangwei && e.chebu;
          }
        })
        .map((e) => {
          return {
            username: e.name,
            gw: e.gangwei,
            cb: e.chebu,
            carcode: e.chepai,
            usertype: 1,
            companyid: this.formData.id,
          };
        });
      // console.log(this.dinList);
      // console.log(filteredData);
      if (this.dingxiang > filteredData.length) {
        try {
          await this.$confirm(
            "含有填写不完整的人员信息,将被忽略, 是否提交?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          );
          console.log("ok...");
        } catch (error) {
          console.log("not ok...");
          return;
        }
      }
      try {
        let r = await addld({ json: JSON.stringify(filteredData) });
        if (r.error == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.iptList = [];
          this.dinList = [];
          this.shenbu = 0;
          this.dingxiang = 0;
          this.findld(1);
        } else {
          this.$message({
            message: "操作失败",
            type: "error",
          });
        }
      } catch (error) {
        console.log(error);
        this.$message({
          message: "操作失败",
          type: "error",
        });
      }
      console.log("submit...");
    },
    //查询单位领导用车
    async findld(type) {
      try {
        let r = await findld({ companyId: this.formData.id, type: type });
        if (r.error != 0) {
          throw new Error();
          return;
        }

        r.data.forEach((element) => {
          if (element.usertype == 0) {
            this.iptList.push({
              id: element.id,
              name: element.username,
              leixin: element.gw,
              chepai: element.carcode,
              chebu: element.cb + "",
            });
            this.shenbu++;
          } else {
            this.dinList.push({
              id: element.id,
              name: element.username,
              gangwei: element.gw,
              chepai: element.carcode,
              chebu: element.cb + "",
            });
            this.dingxiang++;
          }
        });
        console.log(this.iptList, this.shenbu);
      } catch (error) {
        this.$message({
          message: "获取领导用车数据失败",
          type: "error",
        });
      }
    },
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      var q = window.location.pathname.substr(1).match(reg_rewrite);
      if (r != null) {
        return unescape(r[2]);
      } else if (q != null) {
        return unescape(q[2]);
      } else {
        return null;
      }
    },
    //领导UI美化要求只放一个按钮，接口只能一次存1个，要调用3次，每次加延时避免太频繁，后期后台需要优化
    change3Linkman() {
      this.changeLinkman(0);
      setTimeout(() => {
        this.changeLinkman(1);
      }, 100);
      setTimeout(() => {
        this.changeLinkman(2);
      }, 200);
    },
    //修改 新增联系人
    async changeLinkman(index) {
      console.log(this.linkman);
      if (this.linkman[index].id == "") {
        delete this.linkman[index].id;
      }
      var formData = JSON.parse(JSON.stringify(this.linkman[index]));
      var url = "/admin/linkman/changeLinkman.do";
      var param = new URLSearchParams();
      // console.log(formData);
      for (var key in formData) {
        if (formData[key] instanceof Array) {
          param.append(key, formData[key].join(","));
        } else {
          param.append(
            key,
            typeof formData[key] === "undefined" ? "" : formData[key]
          );
        }
      }
      console.log(formData);
      let thit_ = this;
      axios(url, "post", param).then(function (data) {
        if (data.error == 0) {
          thit_.$message({
            message: "保存成功",
            type: "success",
          });
          thit_.fetchData();
        } else {
          thit_.$message.error("保存失败");
          thit_.fetchData();
        }
      });
    },
    fetchData() {
      var url = "/admin/company/findDetails.do";
      var params = {};
      if (this.getQueryString("id")) {
        params.id = this.getQueryString("id");
      }
      axios(url, "get", params).then((data) => {
        // console.log(data);
        if (data.error == 1) {
          this.$alert("出错了", "错误提示", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$router.replace({ name: "dashboard" });
            },
          });
        } else {
          data.company.reMark = data.company.reMark ? data.company.reMark : "";
          data.company.subLevId =
            data.company.subLevId != "0" ? data.company.subLevId : null;
          data.company.tagId =
            data.company.tagId != "0" ? data.company.tagId : null;
          data.company.parentId =
            data.company.parentId != "0" ? data.company.parentId : null;
          data.company.standardId =
            data.company.standardId != "0" ? data.company.standardId : null;
          data.company.properId =
            data.company.properId != "0" ? data.company.properId : null;
          var ltxgbrs = data.company.txgbnum + data.company.lxgbnum;
          data.company.ltxgbrs = parseInt(ltxgbrs);
          this.formData = data.company;
          console.log(this.formData);
          this.taglist = data.taglist;
          this.pcoms = data.pcoms;
          // console.log(this.pcoms)
          this.gg = data.gg;
          this.xz = data.xz;
          data.linkman.forEach((linkman) => {
            this.linkman.forEach((linkmanLocal) => {
              if (linkman.type == linkmanLocal.type) {
                for (var key in linkman) {
                  linkmanLocal[key] = linkman[key];
                }
              }
            });
          });
          this.linkman.forEach(function (l) {
            l["company.id"] = data.company.id;
          });
          this.iptList = [];
          this.dinList = [];
          this.shenbu = 0;
          this.dingxiang = 0;
          this.findld(0);
          this.findld(1);
        }
      });
    },
    close() {
      if (this.getQueryString("id") && window.parent.app) {
        console.log("关闭弹窗");
        window.parent.this.dialogVisible = false;
      }
    },
    save() {
      var url = "/admin/company/changeCompanyDetails.do";
      var formData = JSON.parse(JSON.stringify(this.formData));
      delete formData.createDate;

      var param = {
        id: formData.id,
        companyName: formData.companyName,
        standardId: formData.standardId,
        properId: formData.properId,
        rybznum: formData.rybznum,
        dwsynum: formData.dwsynum,
        ltxgbrs: formData.ltxgbrs,
        sbjgbrs: this.shenbu,
        dxhgwnum: this.dingxiang,
      };
      // formData["parentComId"] = formData.parentId;
      // var param = new URLSearchParams();
      // for (var key in formData) {
      //   if (formData[key] instanceof Array) {
      //     param.append(key, formData[key].join(","));
      //   } else {
      //     param.append(
      //       key,
      //       typeof formData[key] === "undefined" ? "" : formData[key]
      //     );
      //   }
      // }
      console.log(formData);
      this.$refs["formData"].validate((pass) => {
        if (!pass) {
          return;
        }
        let thit_ = this;
        axios(url, "post", param).then((data) => {
          if (data.error == 0) {
            thit_.$message({
              message: "保存成功",
              type: "success",
            });
            thit_.fetchData();
            //刷新左侧单位树
            thit_.$store.dispatch("user/getLeftJson");
          }
        });
      });
    },
    //省部级人数车辆绑定
    handleShenbu(value) {
      if (value != "") {
        if (value > this.iptList.length) {
          let num = value - this.iptList.length;
          for (var i = 0; i < num; i++) {
            this.iptList.push({
              name: "",
              leixin: "",
              chepai: "",
              chebu: "0",
            });
          }
        } else if (value < this.iptList.length) {
          let num = this.iptList.length - value;
          for (let i = 0; i < num; i++) {
            let iptListLen = this.iptList.length - 1;
            this.iptList.splice(iptListLen, 1);
          }
        }
      }
    },
    //定向化人数车辆绑定
    handleDingxiang(value) {
      if (value != "") {
        if (value > this.dinList.length) {
          let num = value - this.dinList.length;
          for (var i = 0; i < num; i++) {
            this.dinList.push({
              name: "",
              leixin: "",
              chepai: "",
              chebu: "0",
            });
          }
        } else if (value < this.dinList.length) {
          let num = this.dinList.length - value;
          for (let i = 0; i < num; i++) {
            let dinListLen = this.dinList.length - 1;
            this.dinList.splice(dinListLen, 1);
          }
        }
      }
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.el-dialog {
  -webkit-transform: none;
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
  background: #eef1f6;
}

.el-dialog__body {
  background-color: white;
  margin: 0px 10px;
}

.eluploadwrapper {
  display: inline-block;
  margin-left: 10px;
}

.table-top {
  margin-top: 20px;
}
.has-gutter tr th {
  background: #f5f7fa;
  border-collapse: collapse;
  border: 1px solid #ebeef5;
  text-align: center;
}
.el-table__row td {
  text-align: center;
}
.num-zong {
  display: flex;
  justify-content: space-between;
  margin-top: 19px;
}
.num-left div {
  border-left: 1px solid red;
  padding: 0px 8px;
}
.el-select {
  width: 100%;
}
.add-select {
  widows: 100%;
  display: flex;
}
.add-select .el-form-item {
  width: 33%;
}
.block {
  display: flex;
  margin-top: 22px;
}
.jiben {
  display: flex;
  background: #f6f6f6;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
}
.form-huan {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.el-select {
  width: 100%;
}
.el-upload-dragger {
  width: 100%;
  height: 50px;
}
.form-input {
  width: 100%;
}
.shangchuan {
  width: 100%;
  display: flex;
  align-items: center;
}
.shangchuan span {
  text-align: left;
  padding: 0px 0px 0px 31px;
  width: 72px;
  font-size: 14px;
  color: #606266;
}
.upload-demo {
  width: 100%;
}
.el-upload {
  width: 100%;
}
.el-upload-dragger {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-form-item {
  margin-bottom: 18px !important;
}
.bianzhi-top {
  margin: 0px 20px 20px 20px;
  padding: 20px;
  background: #fcfcfc;
  //  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}

// .form-conter {
//   margin-top: 8px;
// }
.input-zong {
  display: flex;
}
.bianzhi-input {
  display: flex;
}
.form-bianzhi2 {
  display: flex;
  margin-top: 20px;
}
/* .form-chelaing{ */
/*     display: flex; */
/*     flex-direction: column; */
/*     text-align: left; */
/* } */
.form-span2 {
  text-align: left;
  padding: 0px 26px 0px 0px;
  width: 72px;
  font-size: 15px;
}
.chebuNode div {
  display: flex;
}
.chebuNode div label {
  width: 120px !important;
}
.chebuNode div div {
  margin-left: 0px !important;
}
.input-zong {
  display: flex;
}
.bianzhi-input {
  display: flex;
}
.form-bianzhi {
  display: flex;
}
.danwei-top {
  margin-top: 50px;
}
.bangdingTitle {
  font-size: 15px;
}
.headSaveBtn {
  margin-top: 4px;
  position: absolute;
  right: 22px;
  &.bangdingBtn {
    margin-top: -6px;
    margin-right: 4px;
  }
}
</style>
